<template>  
    <view class="tabbar-container">  
		<view class="box">
			<view class="cu-bar tabbar foot" :class="'bg-'+vcolor">
				<view class="action" :class="selected === 0 ? 'text-green':''" @click="select(0)">
					<view class="cuIcon-apps"></view> 数据
				</view>
				<view class="action" :class="selected === 1 ? 'text-green':''" @click="select(1)">
					<view class="cuIcon-settings"></view> 操作
				</view>
				<view class="action add-action" :class="selected === 5 ? 'text-green':''" @click="select(5)">
					<button class="cu-btn cuIcon-add bg-green shadow"></button>
					配置
				</view>
				<view class="action" :class="selected === 2 ? 'text-green':''" @click="select(2)">
					<view class="cuIcon-explore"></view>
					监控
				</view>
				<view class="action" :class="selected === 3 ? 'text-green':''" @click="select(3)">
					<view class="cuIcon-my"></view>
					我的
				</view>
			</view>
		</view>
    </view>  
</template>  

<script>  
    export default {
		name:'bar',
		props: {
			vcolor: {
				type: String
			},
			vselected: {
				type: Number,
				default: 0
			}
		},
		watch: {
			vselected: {
				immediate: true,
				handler (val) {
					this.select(val)
				}
			}
		},
        data() {  
            return {
				selected: this.vselected
            }
        },
        methods: {
			select(page) {
				this.selected = page
				this.$emit("selectPage", {pages:page})
			}
        }  
    }  
</script>  
<style>
	.box {
		height: 100upx;
		margin: 20upx 0;
	}
	
	.box view.cu-bar {
		margin-top: 20upx;
	}
</style>  